<template>
  <a-card :bordered="false">
    <!-- 查询区域 -->
    <div class="table-page-search-wrapper">
      <a-form layout="inline" @keyup.enter.native="searchQuery">
        <a-row :gutter="24">
          <a-col :span="6" :sm="6">
            <a-form-item label="项目编号">
              <a-input placeholder="请填写项目编号" v-model="queryParam.cxj_xmbh"></a-input>
            </a-form-item>
          </a-col>
          <a-col :span="6" :sm="6">
            <a-form-item label="项目名称">
              <a-input placeholder="请填写项目名称" v-model="queryParam.cxj_mc_zw"></a-input>
            </a-form-item>
          </a-col>
          <a-col :span="6" :sm="6">
            <a-form-item label="申报单位">
              <a-input placeholder="请填写申报单位" v-model="queryParam.sbdw_qymc"></a-input>
            </a-form-item>
          </a-col>
          <a-col :span="6" :sm="6">
            <a-form-item label="是否分配">
              <a-select v-model="queryParam.is_pf" placeholder="请选择是否分配">
                <a-select-option value="">请选择</a-select-option>
                <a-select-option value="Y">是</a-select-option>
                <a-select-option value="N">否</a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :span="6" :sm="6">
            <a-form-item label="所属集团">
              <a-select v-model="queryParam.ssjtid" placeholder="请选择所属集团">
                <a-select-option v-for="group in groupData" :key="group.jttjdwMc" :value="group.id">
                  {{group.jttjdwMc}}
                </a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :span="6" :sm="6">
            <a-form-item label="形审状态">
              <a-select v-model="queryParam.xmztbh" placeholder="请选择形审状态">
                <a-select-option value="">请选择</a-select-option>
                <a-select-option value="301">待形审</a-select-option>
                <a-select-option value="302">材料补正</a-select-option>
                <a-select-option value="303">不通过</a-select-option>
                <a-select-option value="304">通过</a-select-option>
                <a-select-option value="305">材料补正已提交</a-select-option>

              </a-select>
            </a-form-item>
          </a-col>
          <a-col :span="6" :sm="6">
            <a-form-item label="年份">
              <a-date-picker
                mode="year"
                v-model="queryParam.shijian"
                format="YYYY"
                :open='yearShowOne'
                @openChange="openChangeOne"
                @panelChange="onYearChange"
                placeholder="请选择年份"
              />
            </a-form-item>
          </a-col>
          <a-col :md="6" :sm="6">
                        <span style="float: left;overflow: hidden;" class="table-page-search-submitButtons">
                            <a-button type="primary" @click="searchQuery" icon="search">查询</a-button>
                            <a-button type="primary" @click="searchReset" icon="reload" style="margin-left: 8px">重置</a-button>
                        </span>
          </a-col>
        </a-row>
      </a-form>
    </div>
    <!-- 查询区域-END -->
    <div class="tjdata">
      　<span>总数量：{{tjdata.sum}}</span>
      　<span>待形审：{{tjdata.dxs}}</span>
      　<span>材料补正提交：{{tjdata.clbzytj}}</span>
      　<span>材料补正：{{tjdata.clbz}}</span>
      　<span>形审通过：{{tjdata.xsytg}}</span>
      　<span>形审不通过：{{tjdata.xswtg}}</span>
    </div>
    <!-- 操作按钮区域 -->
    <div class="table-operator">
      <!-- <a-button @click="handleAdd" type="primary" icon="plus">新增</a-button>
      <a-button type="primary" icon="download" @click="handleExportXls('形式审查结果表')">导出</a-button>
      <a-upload name="file" :showUploadList="false" :multiple="false" :headers="tokenHeader" :action="importExcelUrl" @change="handleImportExcel">
          <a-button type="primary" icon="import">导入</a-button>
      </a-upload> -->
      <!-- 高级查询区域 -->
      <!-- <j-super-query :fieldList="superFieldList" ref="superQueryModal" @handleSuperQuery="handleSuperQuery"></j-super-query>
      <a-dropdown v-if="selectedRowKeys.length > 0">
          <a-menu slot="overlay">
          <a-menu-item key="1" @click="batchDel"><a-icon type="delete"/>删除</a-menu-item>
          </a-menu>
          <a-button style="margin-left: 8px"> 批量操作 <a-icon type="down" /></a-button>
      </a-dropdown> -->
    </div>

    <!-- table区域-begin -->
    <div class="xslist">
      <!-- <div class="ant-alert ant-alert-info" style="margin-bottom: 16px;">
          <i class="anticon anticon-info-circle ant-alert-icon"></i> 已选择 <a style="font-weight: 600">{{ selectedRowKeys.length }}</a>项
          <a style="margin-left: 24px" @click="onClearSelected">清空</a>
      </div> -->
      <div class="xslist_left">
        <a-table
          ref="table"
          size="middle"
          :scroll="{x:460}"
          bordered
          rowKey="id"
          :columns="columns"
          :dataSource="dataSource"
          :pagination="ipagination"
          :loading="loading"
          :customRow="selectxs"
          class="CxjXsscListGly j-table-force-nowrap"
          :rowClassName="setRowClassName"
          @change="handleTableChange">

          <template slot="htmlSlot" slot-scope="text">
            <div v-html="text"></div>
          </template>
          <template slot="imgSlot" slot-scope="text">
            <span v-if="!text" style="font-size: 12px;font-style: italic;">无图片</span>
            <img v-else :src="getImgView(text)" height="25px" alt="" style="max-width:80px;font-size: 12px;font-style: italic;"/>
          </template>
          <template slot="fileSlot" slot-scope="text">
            <span v-if="!text" style="font-size: 12px;font-style: italic;">无文件</span>
            <a-button
              v-else
              :ghost="true"
              type="primary"
              icon="download"
              size="small"
              @click="downloadFile(text)">
              下载
            </a-button>
          </template>

          <span slot="action" slot-scope="text, record">
                        <a @click.stop="handlePreview(record)">查看</a>
                        <a-divider type="vertical" />
                        <a @click.stop="getqueryHistory(record)">记录</a>
                    </span>

        </a-table>
      </div>
      <div class="xslist_right">
        <div class="">
          <p class="xslist_right_title1">{{new Date().getFullYear()}}年度电力创新奖形式审查表</p>
          <!--<p class="xslist_right_xmbh">成果编号：{{cxj_xmbh}}</p>
          <p class="xslist_right_cglb">成果类别：</p>-->
          <div class="tableForm">
            <table style="text-align:center;" border="" cellspacing="0" align="center" cellpadding="">
              <tr>
                <td width="180">成果编号：</td>
                <td class="td_text">{{cxj_xmbh}}</td>
                <td width="180">成果类别：</td>
                <td class="td_text"></td>
              </tr>
              <tr>
                <td width="180">申报单位：</td>
                <td colspan="3" class="td_text">{{sbdw_qymc}}</td>
              </tr>
              <tr>
                <td width="180">推荐单位：</td>
                <td colspan="3" class="td_text">{{jttjdw_mc}}</td>
              </tr>
              <tr>
                <td width="180">项目名称：</td>
                <td colspan="3" class="td_text">{{cxj_mc_zw}}</td>
              </tr>
            </table>
          </div>
        </div>
        <div>
          <p class="xslist_right_title2">申报材料信息</p>
          <div class="tableList xstableList">
            <div>
              <div class="table_head">
                <p class="flex0">序号</p>
                <p class="flex2">材料审查项</p>
                <p class="flex01">添加说明</p>
                <p class="flex02">说明</p>
              </div>
              <div class="table_cont">
                <div class="table_contli" v-for="(item, index) in queryxslist" :key="index">
                  <div class="flex_box">
                    <div class="xsindex flex0">{{index+1}}</div>
                    <div class="xswtinfo flex2">
                      <div class="xswtLbmc">{{item.xswtLbmc}}</div>
                      <div class="xswtlist">
                        <div class="xswtdetail" v-for="(item1, index1) in item.List" :key="index1">
                          <div class="xswtMc">{{item1.xswtMc}}</div>
                          <div class="xsselect">
                            <a-button type="link" @click="addDescription(item1)">说明</a-button>
                          </div>
                          <div class="xsarea">
                            <textarea v-model="item1.xsscBz">说明</textarea>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="btnlist">
            <a-button class="tongguo" type="primary" @click="submit('304')">通过</a-button>
            <a-button class="btongguo" type="primary" @click="submit('303')">不通过</a-button>
            <a-button class="buzheng" type="primary" @click="submit('302')">补正</a-button>
            <a-button class="zancun" type="primary" @click="submit('0')">暂存</a-button>
          </div>
        </div>
      </div>
    </div>
    <cxj-xssc-modal ref="modalForm" @ok="modalFormOk"></cxj-xssc-modal>
    <cxj-xssc-history ref="modalForm" :expertFlag="expertFlag" :recordId="recordId" :flId="fl_id"></cxj-xssc-history>
    <add-description ref="addDescription" :xswtbh="xswtbh" :showFlag="showFlag" :sbnd="shijian" :flid="fl_id" @callbackDescription="callbackDescription"></add-description>
  </a-card>
</template>

<script>
import '@assets/less/TableExpand.less'
import { mixinDevice } from '@/utils/mixin'
import CxjXsscModal from './modules/CxjXsscModal'
import CxjXsscHistory from './modules/CxjXsscHistory'
import {
  cxjsbTjdwlist,
  cxjXsGetZjFz,
  queryByFlId,
  cxjsbSsjtlist
} from "@api/api"
import {
  xssubmit,
  queryXsjlFirst,
  xsscTjWs,
  list_jlb_ws
} from "@api/manage"
import moment from 'moment'
import Vue from 'vue'
import { USER_INFO, ACCESS_TOKEN } from "@/store/mutation-types"
import AddDescription from './CxjXsscListGly/index'

export default {
  name: 'CxjXsscListJs',
  mixins:[mixinDevice],
  components: {
    CxjXsscModal,
    CxjXsscHistory,
    AddDescription
  },
  data () {
    return {
      description: '形式审查结果表管理页面',
      // 表头
      columns: [
        {
          title: '序号',
          dataIndex: '',
          width:40,
          align:"center",
          customRender:function (t,r,index) {
            return parseInt(index)+1;
          }
        },
        {
          title:'成果编号',
          align:"center",
          width:100,
          dataIndex: 'cxj_xmbh'
        },
        {
          title:'成果名称',
          dataIndex: 'cxj_mc_zw'
        },
        {
          title:'形审状态',
          align:"center",
          dataIndex: 'xszt',
          width:80,
        },
        {
          title: '操作',
          dataIndex: 'action',
          align:"center",
          fixed:"right",
          width:90,
          scopedSlots: { customRender: 'action' }
        }
      ],
      url: {
        list: "/cxj/cxjXssc/list_jlb_ws",
        delete: "/cxj/cxjXssc/delete",
        deleteBatch: "/cxj/cxjXssc/deleteBatch",
        exportXlsUrl: "/cxj/cxjXssc/exportXls",
        importExcelUrl: "cxj/cxjXssc/importExcel",

      },

      dictOptions:{},
      superFieldList:[],
      fileStatus: "",
      selectedRowKeys: [],
      selectionRows: [],
      loading: false,
      isorter: {
        column: 'createTime',
        order: 'desc',
      },
      dataSource: [],
      ipagination: {
        current: 1,
        pageSize: 10,
        pageSizeOptions: ['10', '20', '30'],
        showTotal: (total, range) => {
          return range[0] + "-" + range[1] + " 共" + total + "条"
        },
        showQuickJumper: false,
        showSizeChanger: true,
        total: 0
      },
      queryParam: {},
      recommenderData: [],
      xszjfzData: [],
      queryxslist: [],
      cxjXsscFzId: '',
      cxj_cxj_id: '',
      jttjdw_mc: '',
      cxj_mc_zw: '',
      sbdw_qymc: '',
      cxj_xmbh: '',
      expertFlag: false,
      recordId: '',
      queryxsmxlist: [],
      fl_id: '',
      yearShowOne: false,
      groupData: [],
      shijian: moment(new Date()).format('YYYY'),
      curIndex: 0,
      tjdata: {},
      showFlag: false,
      declareId: '',
      xswtbh: ''
    }
  },
  created() {
    this.$set(this.dictOptions, 'isValid', [{text:'是',value:'Y'},{text:'否',value:'N'}])
    this.getSuperFieldList();
    this.getcxjsbTjdwlist();
    this.getcxjXsGetZjFz();
    this.getCxjsbSsjtlist();
    this.getxsscTjJs();
  },
  computed: {
    importExcelUrl: function(){
      return `${window._CONFIG['domianURL']}/${this.url.importExcelUrl}`;
    },
  },
  methods: {
    // 添加说明
    addDescription(record) {
      this.xswtbh = record.xswtBh;
      this.declareId = record.id;
      this.fl_id = record.flId
      this.showFlag = !this.showFlag;
    },
    // 回显添加说明
    callbackDescription(data) {
      console.log(data, this.queryxslist)
      this.queryxslist.forEach(record => {
        record.List.forEach(item => {
          if (item.id === this.declareId) {
            console.log('信息====', item)
            this.$set(item, 'xsscBz', data)
          }
        })
      })
      this.$forceUpdate()
    },
    // 查看
    handlePreview(record){
      let token = Vue.ls.get(ACCESS_TOKEN);
      sessionStorage.setItem('token', token);
      let routeData = this.$router.resolve({
        path: '/shenbao/declare',
        query: {
          type: record.fl_id,
          cxj_cxj_id: record.id,
          isHead: 2,
          from: 'gly',
          xsztbh: record.xsztbh,
          cxj_xmbh: record.cxj_xmbh,
          cxj_mc_zw: record.cxj_mc_zw
        }
      });
      window.open(routeData.href, '_blank');
    },
    searchQuery() {
      this.loadData(1);
    },
    // 弹出日历和关闭日历的回调
    openChangeOne(status){
      //status是打开或关闭的状态
      if(status){
        this.yearShowOne =  true
      }
    },
    // 得到年份选择器的值
    onYearChange(value){
      this.shijian = moment(value).format('YYYY');
      this.queryParam.shijian = moment(value).format('YYYY');
      this.yearShowOne = false;
    },
    // 获取所属集团数据
    getCxjsbSsjtlist(){
      cxjsbSsjtlist().then(res=>{
        if (res.success) {
          this.groupData = res.result;
        }
      })
    },
    getxsscTjJs() {
      const self = this;
      xsscTjWs(self.shijian).then(res=>{
        if (res.code=='200') {
          self.tjdata = res.result;
        }
      })
    },
    getQueryField() {
      //TODO 字段权限控制
      var str = "id,";
      this.columns.forEach(function (value) {
        str += "," + value.dataIndex;
      });
      return str;
    },
    searchReset() {
      this.queryParam = {};
      this.shijian = moment(new Date()).format('YYYY');
      this.queryParam.shijian = this.shijian;
      this.loadData(1);
    },
    loadData(arg) {
      if (arg==1) {
        this.ipagination.current = 1;
      }
      this.loading = true;
      this.queryParam.shijian = this.shijian;
      let params = Object.assign(this.queryParam, this.isorter, this.filters)
      params.field = this.getQueryField();
      if (this.curIndex == +(this.ipagination.pageSize) - 1) {
        params.pageNo = this.ipagination.current+1;
      } else {
        params.pageNo = this.ipagination.current;
      }
      this.ipagination.current = params.pageNo;
      params.pageSize = this.ipagination.pageSize;
      // console.log(params, 'params')
      // postAction(this.url.list, params).then((res) => {
      list_jlb_ws(params).then((res) => {
        if (res.success) {
          this.dataSource = res.result.records || res.result;
          var ind;
          if(arg == 'submit') {
            if (this.curIndex == +(this.ipagination.pageSize) - 1) {
              this.curIndex = 0;
            } else {
              if (this.dataSource.length == +(this.curIndex) +1) {
                this.curIndex = 0;
              } else {
                this.curIndex = +(this.curIndex) +1;
              }
            }
          } else {
            this.curIndex = 0;
          }
          ind = this.curIndex;
          // console.log(ind, 'ind')
          this.getqueryByFlId(res.result.records.length && res.result.records[ind].fl_id, res.result.records.length && res.result.records[ind].id);
          this.fl_id = res.result.records.length && res.result.records[ind].fl_id;
          this.cxj_cxj_id =res.result.records.length && res.result.records[ind].id;
          this.jttjdw_mc =res.result.records.length && res.result.records[ind].jttjdw_mc;
          this.cxj_mc_zw =res.result.records.length && res.result.records[ind].cxj_mc_zw;
          this.sbdw_qymc =res.result.records.length && res.result.records[ind].sbdw_qymc;
          this.cxj_xmbh = res.result.records.length && res.result.records[ind].cxj_xmbh;
          // this.getqueryByFlId(res.result.records.length && res.result.records[0].fl_id, res.result.records.length && res.result.records[0].id);
          // this.fl_id = res.result.records.length && res.result.records[0].fl_id;
          // this.cxj_cxj_id =res.result.records.length && res.result.records[0].id;
          // this.jttjdw_mc =res.result.records.length && res.result.records[0].jttjdw_mc;
          // this.cxj_mc_zw =res.result.records.length && res.result.records[0].cxj_mc_zw;
          // this.sbdw_qymc =res.result.records.length && res.result.records[0].sbdw_qymc;
          // this.cxj_xmbh = res.result.records.length && res.result.records[0].cxj_xmbh;
          if (res.result.total) {
            this.ipagination.total = res.result.total;
          } else {
            this.ipagination.total = 0;
          }
        }
        if (res.code === 510) {
          this.$message.warning(res.message)
        }
        this.loading = false;
      })
    },
    getcxjsbTjdwlist(){
      cxjsbTjdwlist().then(res=>{
        if (res.success) {
          this.recommenderData = res.result;
        }
      })
    },
    getcxjXsGetZjFz() {
      let user = Vue.ls.get(USER_INFO);
      cxjXsGetZjFz({sysZjId: user.id}).then(res=>{
        if(res.success) {
          this.xszjfzData = res.result;
          if (res.result.length) {
            this.cxjXsscFzId = res.result[0].cxj_xssc_fz_id;
            // this.queryParam.cxjXsscFzId = this.cxjXsscFzId;
          }
          this.loadData();
        }
      })
    },
    selectxs(record, index) {
      return {
        on: {
          click: () => {
            this.curIndex = index;
            this.fl_id = record.fl_id;
            this.cxj_cxj_id = record.id;
            this.jttjdw_mc =record.jttjdw_mc;
            this.cxj_mc_zw =record.cxj_mc_zw;
            this.sbdw_qymc =record.sbdw_qymc;
            this.cxj_xmbh = record.cxj_xmbh;
            this.getqueryByFlId(record.fl_id, record.id);
          }
        }
      }
    },
    setRowClassName (record, index) {
      return record.id === this.cxj_cxj_id ? 'clickRowStyl' : '';
    },
    getqueryHistory(record) {
      this.expertFlag = !this.expertFlag;
      this.recordId = record.id;
      this.fl_id = record.fl_id;
    },
    getqueryByFlId(fl_id, id) {
      queryByFlId({id:fl_id}).then(res=>{
        if (res.code=='200') {
          this.getqueryXsjlFirst(id)
          this.queryxslist = res.result;
        }
      })
    },
    getqueryXsjlFirst(id) {
      queryXsjlFirst(id).then(res=>{
        this.queryxsmxlist = res.result;
        for (var i=0;i<this.queryxslist.length;i++) {
          this.queryxslist[i].xsscSffh = 'Y';
          // this.queryxslist[i].xsscBz = '';
          for (var j=0;j<this.queryxsmxlist.length;j++) {
            if (this.queryxslist[i].xswtBh == this.queryxsmxlist[j].xswtBh) {
              this.queryxslist[i].xsscSffh = this.queryxsmxlist[j].xsscSffh;
              this.queryxslist[i].xsscBz = this.queryxsmxlist[j].xsscBz;
            }
          }
        }
        this.queryxslist = this.sortarr(this.queryxslist);
      })
    },
    sortarr(arr) {
      let dataArr = [];
      arr.map(mapItem => {
        if (dataArr.length == 0) {
          dataArr.push({ xswtLb: mapItem.xswtLb,xswtLbmc: mapItem.xswtLbmc, List: [mapItem] })
        } else {
          let res = dataArr.some(item=> {
            if (item.xswtLb == mapItem.xswtLb) {
              item.List.push(mapItem)
              return true
            }
          })
          if (!res) {
            dataArr.push({ xswtLb: mapItem.xswtLb,xswtLbmc: mapItem.xswtLbmc, List: [mapItem] })
          }
        }
      })
      return dataArr
    },
    selectChange(e, index, index1, xsscSffh) {
      if (e == xsscSffh) {
        this.queryxslist[index].List[index1].xsscSffh = xsscSffh;
      } else {
        this.queryxslist[index].List[index1].xsscSffh = e;
      }
      this.queryxslist = Object.assign([], this.queryxslist)
      // console.log(this.queryxslist ,'33333')
    },
    submit(zt) {
      let that = this;
      var xssc_mx = [];
      for(var i = 0; i < this.queryxslist.length; i++) {
        for (var j = 0; j < this.queryxslist[i].List.length; j++) {
          let item = this.queryxslist[i].List[j]
          xssc_mx.push({
            xsscSffh: item.xsscBz ? 'N' : 'Y',
            xsscBz: item.xsscBz,
            xswtBh: item.xswtBh,
          })
        }
      }
      /* if(zt == '304') {
          var a = xssc_mx.every( (val) => val.xsscSffh=='Y');
          if (!a) {
              this.$message.warning('请设置每一项都合格');
              return
          }
      } else if (zt=='303') {
          var c = xssc_mx.some( (val) => val.xsscSffh=='N');
          var b = false;
          for (var i=0;i<xssc_mx.length;i++) {
              if (xssc_mx[i].xsscSffh == 'N') {
                  if (xssc_mx[i].xsscBz == '') {
                      b = false;
                  } else {
                      b = true;
                  }
              }
          }
          if (!b || !c) {
              this.$message.warning('请设置不合格项和说明信息')
              return
          }
      } */
      xssubmit(xssc_mx, that.cxj_cxj_id, zt).then(res=>{
        if (res.success) {
          this.$message.success('提交成功');
          // this.loadData(1);
          this.loadData('submit');
        } else {
          this.$message.warning(res.message)
        }
      })
    },
    initDictConfig(){},
    getSuperFieldList(){
      let fieldList=[];
      fieldList.push({type:'string',value:'cxjCxjId',text:'成果ID',dictCode:''})
      fieldList.push({type:'string',value:'xsscJg',text:'形审结果',dictCode:''})
      fieldList.push({type:'string',value:'userId',text:'操作人',dictCode:''})
      fieldList.push({type:'switch',value:'isValid',text:'是否有效'})
      this.superFieldList = fieldList
    },
    onSelectChange(selectedRowKeys, selectionRows) {
      this.selectedRowKeys = selectedRowKeys;
      this.selectionRows = selectionRows;
    },
    onClearSelected() {
      this.selectedRowKeys = [];
      this.selectionRows = [];
    },
    handleTableChange(pagination, filters, sorter) {
      //分页、排序、筛选变化时触发
      //TODO 筛选
      if (Object.keys(sorter).length > 0) {
        this.isorter.column = sorter.field;
        this.isorter.order = "ascend" == sorter.order ? "asc" : "desc"
      }
      this.ipagination = pagination;
      this.loadData();
    },
    modalFormOk() {
      // 新增/修改 成功时，重载列表
      this.loadData();
      //清空列表选中
      this.onClearSelected()
    },
  }
}
</script>
<style scoped lang="less">
@import '~@assets/less/common.less';
</style>
<style lang="less">
.xslist {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  .xslist_left {
    width: 460px;
  }
  .xslist_right {
    flex: 1;
    margin-left: 20px;
    width: 670px;
  }
}
.tjdata {
  span {
    margin-right:20px;
  }
}
.clickRowStyl {
  background-color:#e6f7ff;
}
.ant-table-tbody>tr {
  cursor: pointer;
}
.CxjXsscListGly {
  .ant-table-thead>tr th{
    padding:8px 3px!important;
    font-size:14px;
    text-align: center;
  }
  .ant-table-tbody>tr td{
    font-size: 14px;
    padding:10px 3px!important;
    word-break: break-all;
    white-space: normal;
    word-wrap:break-word;
  }
  .ant-table-tbody>tr td:nth-child(3){
    max-width: 120px;
    white-space: break-spaces;
  }
}
.tableForm {
  margin-top: 11px;
  table {
    border: 1px solid #ECEBEB;
    width: 100%;
    tr {
      height: 30px;
      td {
        color: #333333;
        font-size: 14px;
        font-weight: 400;
        i {
          color: #CB0C0C;
          margin-right: 5px;
        }
        &.td_text {
          text-align: left;
          padding: 0 20px;
        }
        input {
          width: 100%;
          height: 100%;
          border: 0;
          outline: 0;
        }
      }
    }
  }
}
.xstableList {
  .table_head {
    background: #F5F5F5;
    height: 54px;
    width:100%;
    display: flex;
    align-items: center;
    p {
      height: 54px;
      line-height: 54px;
      font-size: 14px;
      font-family: PingFangSC-Medium, PingFang SC;
      font-weight: 500;
      color: #333333;
      margin:0;
      text-align: center;
    }
  }
  .table_cont {
    border-left: 1px solid #ECEBEB;
    border-right: 1px solid #ECEBEB;
    .table_contli {
      border-bottom: 1px solid #ECEBEB;
    }
    p {
      margin-bottom:0;
      font-size: 14px;
    }
    div {
      font-size: 14px;
    }
    .xswtinfo {
      display: flex;
      align-items: center;
      border-left: 1px solid #ECEBEB;
      border-right: 1px solid #ECEBEB;
    }
    .xswtLbmc {
      min-width: 100px;
      width:16%;
      text-align:center;
    }
    .xswtlist {
      flex:1;
      border-left: 1px solid #ECEBEB;
      .xswtdetail {
        display: flex;
        align-items: center;
        border-bottom: 1px solid #ECEBEB;
        &:last-child {
          border-bottom: none;
        }
      }
      .xswtMc {
        flex:1;
        display: flex;
        align-items: center;
        justify-content: flex-start;
        padding: 0 10px;
        border-right: 1px solid #ECEBEB;
        min-height:60px;
      }
      .xsselect {
        min-width: 90px;
        width:20%;
        min-height:60px;
        text-align:center;
        border-right: 1px solid #ECEBEB;
        display: flex;
        justify-content: center;
        align-items: center;
      }
      .xsarea {
        min-width: 120px;
        width:32%;
        display: flex;
        justify-content: center;
        align-items: center;
        textarea {
          width: 96%;
          min-height: 50px;
          outline: none;
          border: 1px solid #ECEBEB;
          border-radius: 4px;
        }
      }
    }
  }
  .flex_box {
    display: flex;
    align-items: center;
  }
  .flex0 {
    min-width: 30px;
    text-align:center;
    width:5%;
  }
  .flex1 {
    flex:1;
  }
  .flex01 {
    min-width: 90px;
    width: 16%;
  }
  .flex02 {
    width: 26%;
  }
  .flex2 {
    flex:2;
  }
}
.tableList {
  margin-top: 30px;
  table {
    margin-top: 20px;
    background: #FFFFFF;
    thead {
      background: #F5F5F5;
      tr {
        th {
          height: 54px;
          font-size: 16px;
          font-family: PingFangSC-Medium, PingFang SC;
          font-weight: 500;
          color: #333333;
        }
      }
    }
    tbody {
      tr {
        height: 52px;
        border-bottom: 1px solid #E8E8E8;
        td {
          color: #444444;
          font-size: 14px;
          font-weight: 400;
          height: 52px;
        }
        textarea {
          border: none;
          outline: none;
        }
      }
    }
  }
}
.xslist_right_title1 {
  font-size: 20px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #333333;
  line-height: 29px;
  width: 100%;
  text-align: center;
}
.xslist_right_xmbh {
  width:60%;
  font-size: 14px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #333333;
  line-height: 29px;
  display: block;
  float: left;
}
.xslist_right_cglb {
  width: 40%;
  font-size: 14px;
  font-weight: 400;
  color: #333333;
  line-height: 29px;
  display: block;
  float: left;

}
.xslist_right_title2 {
  font-size: 18px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #111111;
  line-height: 25px;
  width: 100%;
  text-align: center;
  margin-top: 20px;
}
.btnlist {
  width: 100%;
  margin-top: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
  button {
    margin: 0 20px;
    border: none;
  }
  .tongguo {
    background: rgba(24, 144, 255, 0.8);
  }
  .btongguo {
    background: rgba(224, 32, 32, 0.8);;
  }
  .buzheng {
    background: rgba(250, 100, 0, 0.8);
  }
  .zancun {
    background: rgba(247, 181, 0, 0.8);
  }
}
.ant-divider, .ant-divider-vertical {
  margin:0px 5px;
}
</style>